<template>
  <view class="course-chapter">
    <view v-for="(chapter, index) in chapterList" :key="index">
      <!-- 第几章 -->
      <text class="chapters text-ellipsis">第{{index+1}}章 {{chapter.name}}</text>
      <!-- 第几节 -->
      <view class="sections row" v-for="(section, index2) in chapter.sectionList"
        :key="index2" @click="playVideo(section)" >
        <text class="iconfont icon-roundrightfill"></text>
        <view class="row">
          <text>{{index+1}}-{{index2+1}}</text>
          <text class="title text-ellipsis">{{section.name}}</text>
        </view>
        <text v-if="section.isFree" class="see">试看</text>
      </view>
    </view>
    <!-- 视频播放组件 -->
    <CoursePlay v-if="videoVisible" :url="videoUrl" />
  </view>
</template>

<script>
  // 视频播放组件
  import CoursePlay from '@/pages/course/components/course-play'
  export default {
    components: {
      CoursePlay
    },
    props: {
      chapterList: {
        type: Array,
        default: () => [
          {
            id: 1,
            name: '课程介绍',
            sectionList: [
              {id: 1, name: '什么是uni-app框架', isFree: true},
              {id: 2, name: '安装HBuilderX和插件', isFree: false},
              {id: 3, name: '创建uni-app项目和运行Web浏览器', isFree: false}
            ]
          },
          {
            id: 2,
            name: '初始化在线教育APP项目',
            sectionList: [
              {id: 4, name: '创建运行项目和完善项目目录', isFree: true},
              {id: 5, name: '拷贝静态资源到项目和mixin混合讲解', isFree: false}
            ]
          }
        ]
      }
    },
    data() {
      return {
        videoUrl: null,
        videoVisible: false
      }
    },
    methods: {
      playVideo(section) {
        this.videoUrl = 'http://admin.mengxuegu.com/video/hls/git.m3u8'
      }
    }
  }
</script>

<style lang="scss">
  .course-chapter {
    padding: 0 36rpx;
    .chapters {
      margin-top: 30rpx;
      margin-bottom: 10rpx;
      color: $mxg-text-color-black;
      font-size: 35rpx;
      font-weight: bold;
    }
    .sections {
      padding: 20rpx 0;
      font-size: 30rpx;
      border-bottom: #999;
      line-height: 40rpx;
      color: #3d3c40;
      text {
        margin-right: 10rpx;
      }
      .title {
        width: 470rpx;
      }
      .see {
        color: $mxg-text-color-blue;
        font-size: 25rpx;
        // 靠右
        flex: 1;
        text-align: right;
      }
    }
  }
</style>
